/* header */
.header{position: absolute;left:0;top: 0;z-index: 9;width: 100%;color: #fff;}
.header .logo{height: 3.33rem;}
.header .logo img{height: 1.5rem;/*filter: brightness(0) invert(1);*/}
.header .form{margin-right: 1rem;}
.header .form .text{width: 5rem;height: 1rem;box-sizing: border-box;border: 1px solid #f0f0f0;padding: 0 0.5rem;color: #fff;background: none;}
.header .form .text::placeholder{color: #fff;}
.header .form .subm{width: 1rem;height: 1rem;box-sizing: border-box;border: 1px solid #f0f0f0;background: url(../images/icon_search.png) no-repeat center;background-size: contain;border-left: none;}
.header .slogan{text-align:center;line-height: 0.93rem;font-weight: bold;}
.header .slogan p:nth-child(2){letter-spacing: 1px;}
.header .searchBtn{display: none;}
.header .nav{width: 100%;background: rgba(128,128,128, 0.5);}
.header .nav > ul{display: flex;}
.header .nav .nLi{flex: 1;border-left: 1px rgba(255,255,255,0.2) solid;}
.header .nav .nLi:first-child{border: none;}
.header .nav .nLi a{display: block;height: 1.67rem;position: relative;overflow: hidden;}
.header .nav .nLi a span{position: absolute;left: 0;width: 100%;height: 1.67rem;text-align: center;line-height: 1.67rem;}
.header .nav .nLi a span.d{color: #fff;top: 0;}
.header .nav .nLi a span.o{background: #fff;color: #008000;top: -1.67rem;}
.header .nav .nLi:hover a span.d,
.header .nav .nLi:hover a span.o,
.header .nav .nLi.on a span.d,
.header .nav .nLi.on a span.o{transform: translateY(100%);}
.header-scroll{background-image: url(http://www.hbcof.com/material/image/header.jpg);}
/* .header-scroll .slogan>p:first-child{color: #006400;}
.header-scroll .slogan>p:nth-child(2){color: #666666;} */
.header-scroll .slogan>p:first-child{color: #0694E6;}
.header-scroll .slogan>p:nth-child(2){color: #006400;}
.header-scroll .form .subm{background-color: #009b01;}
.header-scroll .nav {background-color: #00a200;}

.header{position: fixed;background-image: url(http://www.hbcof.com/material/image/header.jpg);background-size: cover;}
.header-scroll{background-size: cover;}
.header .logo{/* height: 4.8rem; */}
.header .logo img{height: 1.8rem;/*filter: brightness(0) invert(1);*/filter:none;}
.header .slogan>p:first-child{color: #0694E6;}
.header .slogan>p:nth-child(2){color: #006400;}
.header .nav{/*background: rgba(128, 128, 128, 0.3);*/background-color: #00a200;}
.banner .swiper-pagination{max-width: none;z-index: 1;}
.banner .banner-cursion{position: absolute;bottom: 0;width: 50px;height: 128px;text-align:left;z-index: 1;}
.banner{/*margin-top:6.47rem;*/margin-top:4.95rem;height:calc(100vh - 6.47rem);}
.banner .bgStyle{background-size: 100%;background-position: top;}
/* 标题 */
.titleStyle{position: relative;padding-top: 1.27rem;text-align: center;color: #008000;line-height: 1;letter-spacing: 2px;margin-bottom: 2.4rem;}
.titleStyle.left{text-align: left;}
.titleStyle .en{position: absolute;left: 0;top: 0;width: 100%;color: #e2e2e2;line-height: 1.5rem;font-family: "Impact";text-transform: uppercase;}
.titleStyle .ch{position: relative;z-index: 2;}

/* 主营业务 */
.businessContainer .ul{display: flex;}
.businessContainer .nLi{width: 8.4%;}
.businessContainer .nLi.active{width: 49.6%;}
.businessContainer .nLi .wrap{display: block;height: 18.67rem;cursor: pointer;}
.businessContainer .nLi .wrap::before{content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 2;background: rgba(0, 0, 0, 0.4);}
.businessContainer .nLi .wrap .title{position: absolute;left: 0;top: 50%;transform: translateY(-50%);z-index: 3;width: 100%;;flex-direction: column;color: #fff;text-align: center;}
.businessContainer .nLi .wrap .title .icon{width: 1.93rem;height: 1.93rem;margin-top: 0.93rem;border: 1px dashed #ffffff;border-radius: 50%;}
.businessContainer .nLi .content{width: 78.4%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, 0);z-index: 3;box-sizing: border-box;padding: 1.33rem 1.6rem 1.73rem;background: rgba(255,255,255,0.9);opacity: 0;}
.businessContainer .nLi .content .tit{color: #f19400;}
.businessContainer .nLi .content .desc{color: #333333;line-height: 1rem;height: 2rem;margin: 0.5rem 0;}
.businessContainer .nLi .content .more{display: block;line-height: 1.33rem;color: #333333;text-transform: uppercase;background: url(../images/icon_arr2.png) no-repeat left bottom;}
.businessContainer .nLi .content:hover{box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);}
.businessContainer .nLi .content:hover .more{color: #f19400;}
.businessContainer .nLi.active .wrap::before{opacity: 0;}
.businessContainer .nLi.active .wrap .title{opacity: 0;transform: scale(0);}
.businessContainer .nLi.active .content{opacity: 1;transform: translate(-50%, -50%);transition-delay: 0.4s;}

/* footer */
.footer{background: #00a200;;color: rgba(255,255,255,0.7);padding: 1.2rem 0 0;}
.footer .top{padding-bottom: 2.1rem;}
/*.footer .nav dl{width: 2.8rem;margin-right: 3rem;}*/
.footer .nav dl{width: 5.6rem;margin-right: 1.3rem;}
.footer .nav dl:last-child{margin-right: 0;}
.footer .nav dl dt{color: #fff;padding-bottom: 0.4rem;border-bottom: 1px solid rgba(255,255,255,0.3);margin-bottom: 0.2rem;}
.footer .nav dl dd{line-height: 0.87rem;}
.footer .qrcode li{margin-right: 1.67rem;text-align: center;color: #fff;}
.footer .qrcode li:last-child{margin-right: 0;}
.footer .qrcode li img{width: 4rem;height: 4rem;margin-bottom: 0.2rem;}
.footer .btm{line-height: 0.8rem;color: #fff;padding: 0.3rem 0;text-align: center;}
.footer .btm span{margin-right: 0.53rem;}
.footer .btm span:last-child{margin-right: 0;}
.footer .btm span img{margin-right: 0.2rem;}
.footer a:hover{color: #fff;text-decoration: underline;}

@media screen and (max-width: 1800px){
    .banner.bgStyle{background-size:cover;background-position: center;}
}
@media screen and (max-width: 1620px){

}
@media screen and (max-width: 1480px){

}

@media screen and (max-width: 1300px){
}

@media screen and (max-width: 1200px){
.footer .nav dl{margin-right: 1.5rem;}
}

@media screen and (max-width: 1024px){
.header .form,
.header .slogan,
.header .nav{display: none;}
.header .menuIcon,
.header .searchBtn{display: block;width: 21px;}

.banner .banner-cursion{display: none;}
.header{background-size: cover;}
.banner{margin-top:1.47rem;height: 100%;}
.banner .bgStyle{background-size: cover;}

.titleStyle{margin-bottom: 1rem;padding-top: 0.6rem;}
.titleStyle .en{font-size: 1.3rem;line-height: 0.9rem;}
.titleStyle .ch{font-size: 1rem;}

.footer .top{padding-bottom: 1rem;}
.footer .nav{display: none;}
.footer .qrcode{display: flex;justify-content: center;width: 100%;}
.footer .qrcode::after{display: none;}
.footer .qrcode li{margin-right: 1rem;}
.footer .btm{font-size: 12px;}
.footer .btm span{display: block;margin: 0;}
}

@media screen and (max-width: 760px){
.header .logo{height: 2.2rem;}
.header .logo img{height: 0.8rem;}
.header .menuIcon{margin-left: 0.4rem;}

.header .logo{height: 2.2rem;}
.header .logo img{height: 0.8rem;}

.businessContainer .ul{flex-wrap: wrap;}
.businessContainer .nLi,
.businessContainer .nLi.active{width: 100%;margin-bottom: 0.5rem;}
.businessContainer .nLi:last-child{margin-bottom: 0;}
.businessContainer .nLi .wrap{height: 10rem;}
.businessContainer .nLi .wrap .title{opacity: 0;transform: scale(0);}
.businessContainer .nLi .content{opacity: 1;transform: translate(-50%, -50%);padding: 0.8rem 0.8rem 1rem;}


}

@media screen and (max-width: 468px){
}